<template>
	<view class="record">
		<view class="record-title">
			<view class="record-title-item one">时间</view>
			<view class="record-title-item">数量</view>
			<view class="record-title-item">单价</view>
			<view class="record-title-item">合计</view>
			<view class="record-title-item">状态</view>
			<view class="record-title-item">操作</view>
		</view>
		<van-tabs :ifbuy="true" :active="active" color="#3e527e"  @change="onTabChange">
			<van-tab title="当前挂单">
				<tab1 :activeTAB="active" ref="tab1"></tab1>
			</van-tab>
			<van-tab title="正在交易">
				<tab2 :activeTAB="active" ref="tab2"></tab2>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	import tab1 from '../tab/tab1.vue';
	import tab2 from '../tab/tab2.vue';
	export default {
		components: {
			tab1,
			tab2
		},
		data() {
			return {
				active: 0
			}
		},
		onLoad(op) {
			this.active = Number(op.tab)
		},
		methods: {
			onTabChange (event) {
				this.active = event.detail.index
				if (event.detail.index) {
					this.$refs.tab2.mySellIng()
					return
				}
				this.$refs.tab1.myBuyIng();
			},
		}
	}
	
</script>

<style scoped lang="scss">
	.record {
		&-title {
			position: fixed;
			z-index: 1;
			top: 44px;
			right: 0;
			left: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			background-color: #fff;
			&-item {
				flex: 1;
				padding: 20upx 0;
				color: #9b9b9b;
				min-width: 50upx;
				&.one {
					min-width: 180upx;
					flex: none;
				}
			}
		}
	}
</style>
